<template>
  <div class="menu-tag" v-if="$route.name!=='index'">
    <el-button icon="el-icon-arrow-left" class="arrow-icon arrow-left" @click="scrollTagList()"></el-button>
    <el-button icon="el-icon-arrow-right" class="arrow-icon arrow-right" @click="scrollTagList(1)"></el-button>
    <div class="scroll-wrap" id="scroll-wrap">
      <div class="scroll-area" id="scroll-area">
        <el-tag
          effect="plain"
          :key="index"
          :class="{'active':item.active}"
          v-for="(item,index) in menuTag"
          :closable="menuTag.length>1"
          :disable-transitions="false"
          @click="handleClick(item)"
          @close="handleClose(index)">{{item.title}}
        </el-tag>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'scm-menu-tag',
  data(){
    return {

    }
  },
  mounted(){

  },
  computed:{
    menuTag(){
      return this.$store.state.basicInfo.menuTag
    }
  },
  methods:{
    // 激活当前标签
    handleClick(item){
      this.$store.commit('selectMenuTag',item)
      this.$store.commit('setNavMenuIndex',item.index)
      this.$router.push({name:item.route.substring(1)})
    },
    // 关闭当前标签
    handleClose(index){
      let isActive = false
      if(this.menuTag[index].active) isActive = true // 判断当前关闭的标签是否为活动标签
      this.$store.commit('closeMenuTag',index)
      if(isActive){
        this.$router.push({name:this.menuTag[this.menuTag.length-1].route.substring(1)}) // 跳转到最后一个标签的页面
        this.$store.commit('setNavMenuIndex',this.menuTag[this.menuTag.length-1].index)
      }
      this.$store.commit('setIsShow',false)
    },
    // 标签左右滚动
    scrollTagList(direction){
      let parentNode = document.getElementById('scroll-wrap')
      let node = document.getElementById('scroll-area')
      let oLeft,oWidth,maxWidth
      // 兼容处理
      if(getComputedStyle){ // chrome firefox
        oLeft = parseInt(getComputedStyle(node)['left'].slice(0,-2))
        oWidth = parseInt(getComputedStyle(node)['width'].slice(0,-2))
        maxWidth = parseInt(getComputedStyle(parentNode)['width'].slice(0,-2))
      } else { // ie
        oLeft = parseInt(node.currentStyle.left.slice(0,-2))
        oWidth = parseInt(node.currentStyle.width.slice(0,-2))
        maxWidth = parseInt(parentNode.currentStyle.width.slice(0,-2))
      }
      if(oWidth>maxWidth){
        let DISTANCE = 200 // 滚动距离
        let disX = direction?-DISTANCE:DISTANCE
        let finalDisX = oLeft+disX
        if(!direction){ // 点击左按钮
          if(finalDisX>=0) finalDisX = 0
        } else {
          if(oWidth+finalDisX<=maxWidth) finalDisX = maxWidth-oWidth
        }
        node.style.left = `${finalDisX}px`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$tag-height: 40px;
.menu-tag{
  height: $tag-height; line-height: $tag-height; text-align: left; background-color: #e8e8e8; padding: 0 40px; position: relative;
  .el-tag{
    line-height: 32px; color: #515a6e; border: 0; margin-right: 10px; cursor: pointer;
    ::v-deep .el-tag__close{
      color: #303133;
      &:hover{background-color: transparent;}
    }
    &.active{
      color: #409EFF;
      ::v-deep .el-tag__close{
        color: #409EFF;
      }
    }
  }
}
.arrow-icon{
  padding: 12px 8px; position: absolute; top: 0; opacity: .5; z-index: 2;
  &:hover{opacity: 1; color: #409EFF; background-color: #fff; border-color: #fff;}
  &.arrow-left{left: 0;}
  &.arrow-right{right: 0;}
}
.scroll-wrap{
  position: absolute; left: $tag-height; right: $tag-height; top: 0; bottom: 0;
  .scroll-area{
    position: absolute; left: 0; white-space: nowrap; transition: .5s ease-in-out;
  }
}
</style>